/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-09-29 08:12:06
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-18 11:35:36
 * @FilePath: /react18-vite-admin/src/components/ui/CustomCard/CustomCard.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Collapse, CollapseProps } from 'antd';
import { type ReactNode, useState } from 'react';

import './CustomCard.scoped.scss';

const CustomCard = (props: {
    title: ReactNode;
    canCollapse?: boolean;
    children: ReactNode;
    className?: string;
}) => {
    const { title, canCollapse, children, className } = props;

    const [activeKeys, setActiveKeys] = useState<string[]>(['1']);

    const handleChange = (keys: string[]) => {
        setActiveKeys(keys);
    };

    const items: CollapseProps['items'] = [
        {
            key: '1',
            label: title,
            children: children
        }
    ];

    return (
        <div className={`custom-card-container ${className ?? ''}`}>
            {canCollapse ? (
                <Collapse
                    activeKey={activeKeys}
                    onChange={(keys) => handleChange(keys as string[])}
                    items={items}
                    expandIconPosition="end"
                    ghost
                ></Collapse>
            ) : (
                <div className="card">{children}</div>
            )}
        </div>
    );
};

export default CustomCard;
